<template>
  <div class="outer">
    <div :style="{ margin: '10 auto' }">
      <el-tabs id="tab" v-model="BI_tabsOne" type="card">
        <el-tab-pane label="本年设备总工时和总开动率图表" name="first">
          <div id="BI_chart1" class="BI_EchartFrame"></div>
        </el-tab-pane>
        <el-tab-pane label="设备在本年的开工率图表" name="second">
          <div id="BI_chart2" class="BI_EchartFrame"></div>
        </el-tab-pane>
        <el-tab-pane label="往年至今实动工时和开动率图表" name="third">
          <div id="my35" class="BI_my35">
            <div class="BI_tabstabs">
              <el-form form inline>
                <el-form-item>
                  <el-select v-model="selectValue1" placeholder="请选择设备" @change="BI_selectEN($event)">
                    <el-option v-for="item in BI_EquipmentNumber" :key="item.value" :label="item.label" :value="item.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="selectValue2" placeholder="日" @change="BI_selectTG($event)">
                    <el-option v-for="item in TimeGranularity" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="selectValue3" placeholder="设备实动工时图表" @change="BI_change($event)">
                    <el-option v-for="item in DivForm" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="BI_tabsFrame">
              <bar v-show="chart3" ref="echart3" :text="chart3Text" :nameBar="chart3Name" :value="chart3Value" :yAxisNameBar="chart3YName"> </bar>
              <div id="BI_chart4" class="BI_EchartFramee" v-show="chart4"></div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts'
import axios from 'axios'
import { selectEquipment } from '@/api/bi'
import Bar from './components/bar.vue'

export default {
  data() {
    return {
      selectValue2: '',
      selectValue1: '',
      selectValue3: '',
      response: '',
      chooseEqui: "SK",
      chooseTime:'日',
      chart3YName: '工时',
      chart3Text: '设备实动工时',
      chart3Name: '设备实动工时',
      chart3Value: {
        xAxis: [],
        yAxis: []
      },
      chart3: true,
      chart4: false,
      BI_tabsOne: 'first',
      BI_tabsTwo: 'first',
      BI_EquipmentNumber: [],
      TimeGranularity: [
        { label: '日', value: '0' },
        { label: '月', value: '1' },
        { label: '年', value: '2' }
      ],
      DivForm: [
        { label: '设备实动工时图表', value: '0' },
        { label: '设备开动功率图表', value: '1' }
      ],
      /**预构建折线图框架 */
      BI_getSetOptionLine: {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: 'center',
          text: '设备开动率'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          data: [],
          boundaryGap: false,
          silent: false,
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: 'line',

            type: 'line',
            // smooth: true,
            symbol: 'none',
            //sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: []
          }
        ]
      }
    } //end of return
  },

  mounted() {
    this.drawLine()
    this.drawBar()
    this.obtainSelect()
  },

  methods: {
  
    /** 获取下拉列表数据 */
    async obtainSelect() {
      this.response = await selectEquipment({ chooseId: this.chooseEqui ,chooseTime:this.chooseTime})
      this.BI_EquipmentNumber = this.response.data.equipment_select
    },

    /**将zoom的图框架提前画到画布上 */
    drawBar() {
      this.BI_chart4 = echarts.init(document.getElementById('BI_chart4'))
      this.BI_chart4.setOption(this.BI_getSetOptionLine)
    },
    /**对选择的设备SK，选择设备对应的数据 */
    async BI_selectEN(e) {
      this.chooseEqui = e
      let res = await selectEquipment({ chooseId: this.chooseEqui ,chooseTime:this.chooseTime})
      var Sum = res.data.map //根据SKU筛选的数据
      this.chart3Value.xAxis = Sum.zoom_barTimeDay
      this.chart3Value.yAxis = Sum.zoom_barDataDay
      this.$refs.echart3.drawBar()
      this.BI_chart4.setOption({
        xAxis: {
          data: []
        },    
        series: [
          {
            name: 'line',
            data: []
          }
        ]
      })
      this.BI_chart4.setOption({
        xAxis: {
          data: Sum.zoom_lineTime
        },
        series: [
          {
            name: 'line',
            data: Sum.zoom_lineData
          }
        ]
      })
    },
    /** 选择div */
    BI_change(e) {
      if (e == '0') {
        this.chart3 = true
        this.chart4 = false
        this.$refs.echart3.drawBar()
      } else if (e == '1') {
        this.chart3 = false
        this.chart4 = true
      }
    },
    /** 根据选择的时间粒度选取数据 */
    async BI_selectTG(ee) {
      this.chooseTime=ee;
      let res = await selectEquipment({ chooseId: this.chooseEqui ,chooseTime:this.chooseTime})
      var Sum = res.data.map //根据sku选择的数据
      if (ee == '0') {
        this.chart3Value.xAxis = Sum.zoom_barTimeDay
        this.chart3Value.yAxis = Sum.zoom_barDataDay
        this.$refs.echart3.drawBar()
      } // end of if 日
      if (ee == '1') {
        this.chart3Value.xAxis = Sum.zoom_barTimeMo
        this.chart3Value.yAxis = Sum.zoom_barDataMo
        this.$refs.echart3.drawBar()
      } //end of 月
      if (ee == '2') {
        this.chart3Value.xAxis = Sum.zoom_barTimeYe
        this.chart3Value.yAxis = Sum.zoom_barDataYe
        this.$refs.echart3.drawBar()
      }
    },
    
    /**画出图1和2 */
    async drawLine() {
      let res = await selectEquipment({ chooseId: this.chooseEqui ,chooseTime:this.chooseTime})
      // 基于准备好的dom，,初始化echarts实例
      console.log('======drawLine res is')
      console.log(res)
      let BI_chart1 = echarts.init(document.getElementById('BI_chart1'))
      let BI_chart2 = echarts.init(document.getElementById('BI_chart2'))
      // 绘制图表
      BI_chart1.setOption({
        title: { text: '本年设备实动总工时和总开动率', left: 'center' },
        tooltip: {}, //鼠标悬浮在图例时显示数字
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            saveAsImage: {}
          }
        },
        legend: {
          left: 10
        },
        xAxis: {
          data: [],
          axisTick: {
            show: false
          }
        },
        yAxis: [
          { name: '总实动工时' },
          {
            name: '总开动率',
            
          }
        ],
        //color: ['#c23531','#2f4554'],  自己设置颜色
        series: [
          {
            name: '实动总工时',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f3715c' },
                { offset: 0.5, color: '#aa2116' },
                { offset: 1, color: '#7a1723' }
              ]),

              barBorderRadius: 5
            },
            data: [],

            yAxisIndex: 0
          },
          {
            name: '总开动率',
            type: 'bar',

            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#426ab3' },
                { offset: 0.5, color: '#2b4490' },
                { offset: 1, color: '#102b6a' }
              ]),
              barBorderRadius: 5
            },
            data: [],
            yAxisIndex: 1
          }
        ]
      })
      BI_chart1.showLoading()

          //console.log(this.response.data.name_abbr)
          BI_chart1.hideLoading()
          BI_chart1.setOption({
            xAxis: {
              data: res.data.name_abbr
            },
            series: [
              {
                name: '实动总工时',
                data: res.data.o_zgs
              },
              {
                name: '总开动率',
                data: res.data.o_zkdl
              }
            ]
          })

      BI_chart2.setOption({
        title: { text: '设备在本年的开工率', left: 'center' },
        tooltip: {
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          T_month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          type: 'scroll',
          orient: 'vertical',
          itemWidth: 35,
          itemHeight: 20,
          top: 60,
          right: 10,
          itemGap: 20
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: []
        },

        series: [
          {
            name: '一月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '二月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '三月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '四月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '五月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '六月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '七月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '八月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '九月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '十月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '十一月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '十二月',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 5
            },
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      })
      BI_chart2.showLoading()

          let workRate = res.data.workRate
          BI_chart2.hideLoading()
          BI_chart2.setOption({
            yAxis: {
              data: res.data.name
            },
            series: [
              {
                name: '一月',
                data: workRate.ja_data
              },
              {
                name: '二月',
                data: workRate.fe_data
              },
              {
                name: '三月',
                data: workRate.ma_data
              },
              {
                name: '四月',
                data: workRate.ap_data
              },
              {
                name: '五月',
                data: workRate.may_data
              },
              {
                name: '六月',
                data: workRate.ju_data
              },
              {
                name: '七月',
                data: workRate.jl_data
              },
              {
                name: '八月',
                data: workRate.au_data
              },
              {
                name: '九月',
                data: workRate.se_data
              },
              {
                name: '十月',
                data: workRate.oc_data
              },
              {
                name: '十一月',
                data: workRate.no_data
              },
              {
                name: '十二月',
                data: workRate.de_data
              }
            ]
          })
    }
  },

  components: {
    Bar
  }
}
</script>
<style >
.BI_EchartFrame {
  margin-top: 20px;
  float: left;
  width: 1600px;
  height: 700px;
  border: 1px solid #fff;
}
.BI_EchartFramee {
  margin-top: 20px;
  float: left;
  width: 1400px;
  height: 580px;
  border: 1px solid #fff;
}
.BI_SelectFrame {
  float: left;
  width: 180px;
  height: 40px;
  border: 1px solid #ccc;
}
.BI_my35 {
  margin: 20px;
  float: left;
  width: 1400px;
  height: 750px;
  border: 1px solid #fff;
}
.BI_SelectChoice {
  margin: 20px;
  float: left;
  width: 1400px;
  height: 30px;
}
.BI_tabstabs {
  float: left;
  width: 1400px;
  height: 50px;
  border: 1px solid #fff;
}
.BI_tabsFrame {
  float: left;
  width: 1400px;
  height: 700px;
  border: 1px solid #fff;
}
.outer {
  padding: 0px 0 5px 20px;

  margin-top: 60px;
}
#tab .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 3px solid #004098 !important;
  background-color: #fafafa !important;
  color: #004098 !important;
}
#tab.el-tabs {
  height: calc(100vh - 130px);
  overflow: hidden;
}

#tab .el-tabs__content {
  /* max-height: calc(100vh - 189px); */
  min-height: 800px;
  overflow-y: auto;
}
</style>